<template>
    <div>
        <select v-model="type">
            <option :value="1">App订票</option>
            <option :value="0">前台兑换</option>
        </select>
        <ul>
            <li v-for="item in computedCinemaList(type)" :key="item.cinemaId">
                {{ item.name }}
            </li>
        </ul>
    </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from "vuex";
export default {
    data() {
        return {
            type: 1
        }
    },
    mounted() {
        // if(this.$store.state.cinemaList.length === 0){
        if (this.cinemaList.length === 0) { //升级
            //请求数据
            // this.$store.dispatch("getCinemaList","参数演示")
            this.getCinemaList("参数演示~")//升级
        } else {
            console.log("走缓存");
        }
    },
    // computed: {
    //     computedCinemaList() {
    //         return this.$store.state.cinemaList.filter(item => item.eTicketFlag === this.type)
    //     }
    // }

    computed: {
        // ...mapState(['cinemaList']),
        // ...mapGetters(['computedCinemaList']),
        //使用module方式后的写法,需要指定具体的module名称
        ...mapState('CinemaModule', ['cinemaList']),
        ...mapGetters('CinemaModule', ['computedCinemaList'])
    },
    methods: {
        // ...mapActions(['getCinemaList']),
        //使用module方式后的写法,需要指定具体的module名称
        ...mapActions('CinemaModule', ['getCinemaList'])
    }
}
</script>

<style scoped>
ul li {
    padding: 10px;

}
</style>